<template>
<div>
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="100px">
   <el-form-item  prop="username" label='登录名称'>
    <el-input v-model="username" disabled ></el-input>
  </el-form-item>
  <el-form-item prop="nickname"  label='用户名称'>
    <el-input v-model="ruleForm.nickname"  ></el-input>
  </el-form-item>
  <el-form-item prop="email" label='用户邮箱'>
    <el-input  v-model="ruleForm.email"  ></el-input>
  </el-form-item>
  <el-form-item>
  <el-button type='primary' @click="submitForm">提交修改</el-button>
  <el-button  @click="resetForm">重置</el-button>
   
  </el-form-item>
  
   </el-form>
</div>
</template>

<script>
import {mapGetters} from 'vuex'
import { updataserinfo,userinfo} from '@/api/http'
export default {
    computed : {
        ...mapGetters(['nickname','username','user_pic','email']),
    },
data() {
    var checkEmail = (rule, value, cb) => {
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;

      if (regEmail.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的邮箱"));
    };
    return {
        ruleForm:{
            username:'',
            id:'',
            email:'',
            nickname:'',
            user_pic:''
            

        },
         rules: {
          
           email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
          
            {validator: checkEmail, trigger: "blur", // 正则验证
          },
          ],
          nickname: [
            { required: true, message: '请输入昵称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
        //   password: [
        //     { required: true, message: '请输入账号', trigger: 'blur' },
           
        //    {
        //     pattern:/^\S{6,15}$/,
        //     message: '密码必须是6-15的非空字符串',
        //      trigger: 'blur'


        //    }
        //   ],
        //   repassword: [
        //     { required: true, message: '请输入账号', trigger: 'blur' },
        //     {
        //     pattern:/^\S{6,15}$/,
        //     message: '密码必须是6-15的非空字符串',
        //      trigger: 'blur'
        //    },
        //    {validator: samePwdFn,  trigger: 'blur'},
        //   ],
        },

        
    }
},
methods: {
    submitForm () {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            alert('submit!');
            this.ruleForm.id=this.$store.state.userinfo.id
            const res = await  updataserinfo(
                  this.ruleForm
            )
            console.log(res)
            if(res.data.code===0){
                this.$message.success('编辑用户成功')
                this.$store.dispatch('getuserinfo')
            }
            else{this.$message.error('编辑用户失败')}
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm() {
        this.$refs.ruleForm.resetFields();
      },

    
},
}
</script>

<style scoped>

.el-input{
    width: 500px;
}
</style>